<template>
  <a-card :bordered="false">
    <div>
      <a-input-number :min="1" :max="100" v-model="a" @change="onChange" />
      x
      <a-input-number :min="0" :max="100" :step="0.0033" v-model="b" @change="onChange" />
      = toDefinedFixed({{ noFixedR }}) ={{ r }}
    </div>
  </a-card>
</template>

<script>

import { RoundingMode, RemoveTailZerosMode, toDefinedFixed } from '@/utils/numberUtil'

export default {
  name: 'Number',
  data () {
    return {
      a: 1,
      b: 0.0331,
      r: 0,
      noFixedR: 0
    }
  },
  created () {
    this.noFixedR = this.a * this.b
    this.r = toDefinedFixed(this.noFixedR, 2, RoundingMode.UP, RemoveTailZerosMode.Y)
  },
  methods: {
    onChange (value) {
      this.noFixedR = this.a * this.b
      this.r = toDefinedFixed(this.noFixedR, 2, RoundingMode.UP, RemoveTailZerosMode.Y)
    }
  }
}
</script>
